<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="6">
        <div class="grid-content one">
          <h5>今日顾客统计</h5>
        </div>
      </el-col>
      <el-col :span="6"><div class="grid-content two" /></el-col>
      <el-col :span="6"><div class="grid-content three" /></el-col>
      <el-col :span="6"><div class="grid-content four" /></el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="12">
        <div class="grid-content2"></div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content2" id="main2"></div>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="12">
        <div class="grid-content3" id="main"></div>
      </el-col>
      <el-col :span="12"><div class="grid-content3" /></el-col>
    </el-row>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, onBeforeUnmount } from "vue";
import * as echarts from "echarts";

let myChart: any;
let myChart2: any;

const init1 = () => {
  const main = document.getElementById("main");
  if (main) {
    // 基于准备好的dom，初始化echarts实例
    myChart = echarts.init(main);
    // 绘制图表
    myChart.setOption({
      title: {
        text: "治疗金额技术统计",
        top: 20,
        left: 20,
        textStyle: {
          fontSize: 14,
        },
        subtext: "单位(万元)",
      },
      grid: {
        top: 70,
        bottom: 40,
      },
      xAxis: {
        type: "category",
        data: ["李想", "王伟", "唐越", "张三", "李四", "王五", "赵六"],
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          data: [120, 200, 150, 80, 70, 110, 130],
          type: "bar",
          backgroundStyle: {
            color: "rgba(180, 180, 180, 0.2)",
          },
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: "#83bff6" },
              { offset: 0.5, color: "#188df0" },
              { offset: 1, color: "#188df0" },
            ]),
          },
          barWidth: 30,
        },
      ],
    });
  }
};

const init2 = () => {
  const main2 = document.getElementById("main2");
  if (main2) {
    // 基于准备好的dom，初始化echarts实例
    myChart2 = echarts.init(main2);
    // 绘制图表
    myChart2.setOption({
      series: [
        {
          name: "Access From",
          type: "pie",
          radius: ["40%", "60%"],
          center: ["25%", "50%"],
          itemStyle: {
            borderColor: "#fff",
            borderWidth: 5,
          },
          label: {
            show: false,
            position: "center",
            fontSize: 30,
          },
          labelLine: {
            show: false,
          },
          data: [
            { value: 2048, name: "Search Engine" },
            { value: 735, name: "Direct" },
            { value: 580, name: "Email" },
            { value: 484, name: "Union Ads" },
            { value: 300, name: "Video Ads" },
          ],
        },
        {
          name: "Access From",
          type: "pie",
          radius: ["40%", "60%"],
          center: ["75%", "50%"],
          itemStyle: {
            borderColor: "#fff",
            borderWidth: 5,
          },
          label: {
            show: false,
            position: "center",
            fontSize: 30,
          },
          labelLine: {
            show: false,
          },
          data: [
            { value: 2048, name: "Search Engine" },
            { value: 735, name: "Direct" },
            { value: 580, name: "Email" },
            { value: 484, name: "Union Ads" },
            { value: 300, name: "Video Ads" },
          ],
        },
      ],
    });
  }
};

onMounted(() => {
  init1();
  init2();
  window.onresize = () => {
    myChart.resize();
    myChart2.resize();
  };
});

onBeforeUnmount(() => {
  myChart.dispose();
  myChart2.dispose();
});
</script>

<style lang="less" scoped>
.el-row {
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;

  .one {
    background: linear-gradient(to right, #eb7774, #ee8f64);
  }
}

.grid-content {
  border-radius: 4px;
  height: 150px;
  background-color: #ccc;
  padding: 20px;

  h5 {
    color: #fff;

    &::before {
      content: "";
      display: inline-block;
      width: 12px;
      height: 12px;
      background-color: #fff;
      margin-right: 10px;
      border-radius: 50%;
    }
  }
}

.grid-content2 {
  border-radius: 4px;
  height: 250px;
  background-color: #ccc;
  padding: 20px;
}

.grid-content3 {
  border-radius: 4px;
  height: 250px;
  background-color: #ccc;
}
</style>
